博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
音乐播放器制作(通过数据绑定切换图片)
阅读量:5321 次
发布时间:2019-06-14

本文共 2506 字,大约阅读时间需要 8 分钟。

isPlayingMusic?detail.music.coverImg:detail.headImgSrc是用JS的真值表达式来实现图片切换

  

var postsData = require('../../../data/posts-data.js') //先引入后台模拟数据Page({ data: { isPlayingMusic: false },onLoad: function (option) { var postId = option.id; var postData = postsData.postList[postId];//这个方法是用来定义每个新闻列表对应的顺序是哪个新闻内容 this.setData({ detail: postData //渲染到对应data中就是postData });onMusicTap: function (event) { var currentPostId = this.data.currentPostId; var postData =postsData.postList[currentPostId]; var isPlayingMusic = this.data.isPlayingMusic;//先获取播放状态 if (isPlayingMusic) { wx.pauseBackgroundAudio(); this.setData({ isPlayingMusic: false }) } else { wx.playBackgroundAudio({ dataUrl: postData.music.url, title: postData.music.title, coverImgUrl: postData.music.coverImg //coverImgUrl存储封面只有真机上才显示。 }) this.setData({ isPlayingMusic: true }) }}})

  

var local_database = [    {        headImgSrc: "/images/Catoon50.jpeg",        postId: 0,        music:{          url: "http://music.163.com/song/media/outer/url?id=5268113.mp3",          title: "无心睡眠-Edison",          coverImg:"https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=3dd7c7b91ece36d3b6098b625b9a51e2/3801213fb80e7bec32853882242eb9389b506b71.jpg",        },    },    {                headImgSrc: "/images/Catoon10.jpeg",        postId: 1,        music:{          url:"http://music.163.com/song/media/outer/url?id=36496695&userid=131363136.mp3",          title: "Love Yourself-Justin",          coverImg: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526306083331&di=0f612495915e54ad6490af758db9f7d6&imgtype=0&src=http%3A%2F%2Fp3.music.126.net%2F3Sw-gRHowAFr46IXa2uDbQ%3D%3D%2F18690598160792939.jpg"        }    },     {        headImgSrc: "/images/h1.jpg",        postId: 2,        music: {          url: "http://music.163.com/song/media/outer/url?id=485051616&userid=131363136.mp3",          title: "Love Yourself-LVLV",          coverImg: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526306184333&di=b74486e3b83c3cc4a0bccabfc660c5c5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F8a5f016573e9839cc4d462db6b63efa8d738f40a.jpg"        }    },] module.exports = {    postList: local_database //渲染到对应data中就是posts_key:[]、postList是相应指定的属性变量 }

  

2018-05-14学习收获、每天进步一点,加油,不要放弃!

转载于:https://www.cnblogs.com/EdisonVan/p/9037810.html

你可能感兴趣的文章
2019.02.15 bzoj5210: 最大连通子块和(链分治+ddp)
查看>>
redis cluster 集群资料
查看>>
微软职位内部推荐-Sr. SE - Office incubation
查看>>
微软职位内部推荐-SOFTWARE ENGINEER II
查看>>
centos系统python2.7更新到3.5
查看>>
C#类与结构体究竟谁快——各种函数调用模式速度评测
查看>>
我到底要选择一种什么样的生活方式,度过这一辈子呢:人生自由与职业发展方向(下)...
查看>>
poj 题目分类
查看>>
windows 安装yaml支持和pytest支持等
查看>>
读书笔记:季羡林关于如何做研究学问的心得
查看>>
面向对象的优点
查看>>
套接口和I/O通信
查看>>
阿里巴巴面试之利用两个int值实现读写锁
查看>>
浅谈性能测试
查看>>
Winform 菜单和工具栏控件
查看>>
CDH版本大数据集群下搭建的Hue详细启动步骤(图文详解)
查看>>
巧用Win+R
查看>>
浅析原生js模仿addclass和removeclass
查看>>
Python中的greenlet包实现并发编程的入门教程
查看>>
java中遍历属性字段及值(常见方法)
查看>>